<template>
  <div class="page-container">
    <div class="timeline-container">
      <MyTimelineA />
      <MyTimelineB />
    </div>
    <div class="center-line"></div> <!-- 添加这一行 -->
  </div>
</template>

<script>
import MyTimelineA from './timelineA.vue';
import MyTimelineB from './timelineB.vue';

export default {
  name: 'TimelinePage',
  components: {
    MyTimelineA,
    MyTimelineB,
  },
};
</script>

<style scoped>
.timeline-container {
  display: flex;
  justify-content: space-between;
}

.page-container {
  border: 1px solid black; /* 添加边框 */
  height: 98vh; /* 设置高度为视口的高度 */
  width: 98vw; /* 设置宽度为视口的宽度 */
  box-sizing: border-box; /* 使边框宽度包含在元素的总宽度和高度内 */
  position: absolute; /* 添加这一行 */
  right: 20px;
  align-items: center;
  justify-content: center;
}

.center-line {
  position: absolute; /* 设置为 absolute，以便我们可以相对于 page-container 定位它 */
  left: 50%; /* 设置左侧位置为 page-container 的 50%，使其位于 page-container 的中心 */
  top: 0; /* 设置顶部位置为 0，使其从 page-container 的顶部开始 */
  width: 1px; /* 设置宽度为 1px，使其看起来像一条线 */
  height: 100%; /* 设置高度为 100%，使其跨越整个 page-container */
  background-color: #0056b3; /* 设置背景色为蓝色，使其看起来像一条线 */
}
</style>